<script>
import { getCardListAPI, delCard } from '@/api/carMangement'
export default {
  name: 'CarCard',
  data() {
    return {
      cardList: [],
      params: {
        page: 1,
        pageSize: 3,
        cardStatus: '',
        carNumber: '',
        personName: ''
      },
      total: 0,
      statusList: [{ text: '全部', value: '' }, { text: '可用', value: '0' }, { text: '已过期', value: '1' }],
      selectVal: []
    }
  },
  created() {
    this.getCardList()
  },
  methods: {
    getCardList() {
      getCardListAPI(this.params).then(res => {
        this.cardList = res.data.rows
        this.total = res.data.total
      })
    },
    formatStatus(row, column, cellValue, index) {
      // return cellValue === 0 ? '可用' : '不可用'
      const map = {
        0: '可用',
        1: '不可用'
      }
      return map[cellValue]
    },
    // 每页条数发生变化时触发
    handleSizeChange(e) {
      if (e > this.total) {
        this.params.page = 1
        getCardListAPI({ pageSize: e, page: this.params.page, cardStatus: this.params.cardStatus, carNumber: this.params.carNumber, personName: this.params.personName }).then(res => {
          this.cardList = res.data.rows
          this.total = res.data.total
        })
      } else {
        getCardListAPI({ pageSize: e, page: this.params.page, cardStatus: this.params.cardStatus, carNumber: this.params.carNumber, personName: this.params.personName }).then(res => {
          this.cardList = res.data.rows
          this.total = res.data.total
        })
      }
    },
    // 当前页码改变
    handleCurrentChange(e) {
      this.params.page = e
      this.getCardList()
    },
    handleprevChange() {
      if (this.params.page > 1) {
        this.params.page--
        this.getCardList()
      } else {
        return
      }
    },
    handlenextChange() {
      if (this.params.page < Math.ceil(this.total / this.params.pageSize)) {
        this.params.page++
        this.getCardList(this.params)
      }
    },
    indexMethod(index) {
      return (this.params.page - 1) * this.params.pageSize + index + 1
    },
    queryInfo() {
      this.getCardList()
    },
    addCardMouthFn() {
      this.$router.push('/car/addMouthCard')
    },
    editCard(id) {
      this.$router.push({ path: '/car/addMouthCard', query: { id }})
    },
    deleteCard(id) {
      this.$confirm('是否删除该月卡信息', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delCard(id).then(() => {
          this.getCardList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          if (this.cardList.length === 1 && this.params.page > 1) {
            this.params.page--
            this.getCardList()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleSelectChange(val) {
      this.selectVal = val // 选中的数据
    },
    batchCardDelete() {
      if (this.selectVal.length === 0) {
        this.$message({
          type: 'warning',
          message: '请选择要删除的数据'
        })
        return
      }
      this.$confirm('是否删除选中的月卡信息', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const ids = this.selectVal.map(item => item.id)
        delCard(ids).then(() => {
          this.getCardList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          if (this.cardList.length === 1 && this.params.page > 1) {
            this.params.page--
            this.getCardList()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    toQueryDetail(id) {
      this.$router.push({ path: '/chaxunInfo', query: { id }})
    }
  }
}
</script>
<template>
  <div class="card-container">
    <!-- 搜索区域 -->
    <div class="search-container">
      <div class="search-container-min">
        <span class="search-label">车牌号码：</span>
        <el-input v-model="params.carNumber" clearable placeholder="请输入内容" class="search-main" size="small" />
        <span class="search-label">车主姓名：</span>
        <el-input v-model="params.personName" clearable placeholder="请输入内容" class="search-main" size="small" />
        <span class="search-label">状态：</span>
        <el-select v-model="params.cardStatus" size="small">
          <el-option v-for="item in statusList" :key="item.value" :value="item.value" :label="item.text" />
        </el-select>
      </div>
      <el-button type="primary" class="search-btn" size="small" @click="queryInfo">查询</el-button>
    </div>
    <!-- 新增删除操作区域 -->
    <div class="create-container">
      <el-button type="primary" size="small" @click="addCardMouthFn">添加月卡</el-button>
      <el-button size="small" @click="batchCardDelete">批量删除</el-button>
    </div>
    <!-- 表格区域 -->
    <div class="table">
      <el-table style="width: 100%" :data="cardList"@selection-change="handleSelectChange">
        <!-- <el-table-column type="selection" fixed :show-overflow-tooltip="true" /> -->
        <el-table-column type="selection" />
        <el-table-column type="index" label="序号" :index="indexMethod" />
        <el-table-column label="车主名称" prop="personName" />
        <el-table-column label="联系方式" prop="phoneNumber" />
        <el-table-column label="车牌号码" prop="carNumber" />
        <el-table-column label="车辆品牌" prop="carBrand" />
        <el-table-column label="剩余有效天数" prop="totalEffectiveDate" />

        <el-table-column prop="cardStatus" label="状态" :formatter="formatStatus" />
        <el-table-column label="操作" fixed="right" width="180">
          <template #default="scope">
            <el-button size="mini" type="text">续费</el-button>
            <el-button size="mini" type="text" @click="toQueryDetail(scope.row.id)">查看</el-button>
            <el-button size="mini" type="text" @click="editCard(scope.row.id)">编辑</el-button>
            <el-button size="mini" type="text" @click="deleteCard(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page-container">
      <el-pagination
        :background="true"
        pager-count="6"
        :page-sizes="[params.pageSize, 20, 30, 40]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :current-page="params.page"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        @prev-click="handleprevChange"
        @next-click="handlenextChange"
      />
    </div>
    <!-- 添加楼宇 -->
    <el-dialog
      title="添加楼宇"
      width="580px"
    >
      <!-- 表单接口 -->
      <div class="form-container">
        <!-- <el-form ref="addForm" :model="addForm" :rules="addFormRules">
          <el-form-item label="楼宇名称" prop="name">
            <el-input v-model="addForm.name" />
          </el-form-item>
          <el-form-item label="楼宇层数" prop="floors">
            <el-input v-model="addForm.floors" />
          </el-form-item>
          <el-form-item label="在管面积" prop="area">
            <el-input v-model="addForm.area" />
          </el-form-item>
          <el-form-item label="物业费" prop="propertyFeePrice">
            <el-input v-model="addForm.propertyFeePrice" />
          </el-form-item>
        </el-form> -->
      </div>
      <template #footer>
        <el-button size="mini">取 消</el-button>
        <el-button size="mini" type="primary">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<style lang="scss" scoped>
.card-container {
  padding: 20px;
  background-color: #fff;
}
.search-container {
  display: flex;
  align-items: center;
  justify-content: start;
  font-size: 13px;
  // 允许换行
  flex-wrap: wrap;
  border-bottom: 1px solid rgb(237, 237, 237, .9);
  padding-bottom: 20px;
  .search-container-min{
    display: flex;
    width: 100%;
    .search-main {
    width: 220px;
    margin-right: 10px;
  }
  .search-label{
    display: flex;
    align-items: center;
  }
  }
  .search-btn{
    margin-top: 20px;
  }
}
.create-container{
  margin: 10px 0px;
}
.page-container{
  padding:4px 0px;
  text-align: right;
}
.form-container{
  padding:0px 80px;
}
</style>
